<div class="thumbnail">
  <img src="http://placeHold.it/820x230" alt="">

  <div >
    <h4 class="pull-right">{{produce?.price}}</h4>
    <h4>{{produce?.title}}</h4>
    <p>{{produce?.desc}}</p>
  </div>


  <div>
    <p class="pull-right">{{comments?.length}}</p>
    <p>
      <app-stars [rating]="produce?.rating" ></app-stars>
    </p>
  </div>
  <div class="well">
    <button class="btn btn-success" (click)="isCommentArea = !isCommentArea">{{isCommentArea ?'发表评论' : "关闭评论"}}</button>
    <div [hidden]="isCommentArea">
      <div>
        <!--所有的属性绑定 前者是孩子 -->
        <!--双向数据绑定,只有满足一定的条件才能使用这个方式-->
        <app-stars [readonly]="false" [(rating)]="newRating"></app-stars>

      </div>
      <div>
        <textarea [(ngModel)]="newComment" id=""></textarea>
      </div>
      <div>
        <button class="btn " (click)="addComment()">提交</button>
      </div>
    </div>

    <div class="row" *ngFor="let comment of comments">
      <hr>
      <div class="col-xs-12">
        <app-stars [rating]="comment.rating"></app-stars>
        <span>{{comment.user}}</span>
        <span class="pull-right">{{comment.timestamp}}</span>
        <p></p>
        <p>{{comment.content}}</p>
      </div>

    </div>
  </div>
</div>
